<template>
    <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="menu" tab="菜单权限">
            <a-tree
                multiple
                checkable
                defaultExpandAll
                :selectable="false"
                :tree-data="treeData"
                v-model:checkedKeys="checkedKeys"
                :replaceFields="{ key: 'name' }"
            >
                <template #title="item">{{ t(item.meta.title) }}</template>
            </a-tree>
        </a-tab-pane>
        <a-tab-pane key="button" tab="按钮权限" force-render>按钮权限</a-tab-pane>
    </a-tabs>
</template>
<script lang='ts'>
import { defineComponent, ref, watch, PropType } from 'vue';
import { getMenuRoutesAll } from '@/router/menuRoutes';
import { useI18n } from 'vue-i18n';
type MenuAuth = string[]
export default defineComponent({
    name: 'RoleAuth',
    props: {
        menuAuth: {
            type: Array as PropType<MenuAuth>,
            default: () => []
        }
    },
    emits: ['update:menuAuth'],
    setup(props, { emit }) {
        const { t } = useI18n()
        const treeData = getMenuRoutesAll()
        const activeKey = ref('menu')
        const checkedKeys = ref<string[]>(props.menuAuth)
        watch(props, () => { checkedKeys.value = props.menuAuth })
        watch(checkedKeys, () => { emit('update:menuAuth', checkedKeys.value) })
        return {
            activeKey,
            treeData,
            checkedKeys,
            t
        }
    },
})
</script>